<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text" v-model.trim="words">
      <button @click="onSearch">搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link to="/search">黑马程序员</router-link>
      <router-link to="/search">前端培训</router-link>
      <router-link to="/search">如何成为前端大牛</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      words: ''
    }
  },
  methods: {
    onSearch() {
      // 路径跳转方式：
      // this.$router.push('/search?words=' + this.words)
      // this.$router.push({
      //   path: '/search',
      //   query: {
      //     words: this.words
      //   }
      // })

      // this.$router.push('/search/' + this.words)

      // 这种完整写法，path参数传不过去，因为路径少了一部分，就匹配不到了
      // this.$router.push({
      //   path: '/search',
      //   params: {
      //     words: this.words
      //   }
      // })


      // name跳转方式：（注意：一定要先给路由规则配一个name名字，才能跳）
      // 个人推荐使用name方式跳转，原因：地址栏产品经理能看见，很有可能后续会变动，如果用 path 的方式，当地址变动时（修改路由规则中的path），所有跳转的源代码都要修改，否则跳转地址错误（因为之前的地址已经不存在了），而如果用 name 的方式跳转，则源代码无需修改
      // this.$router.push({ name: 'search', query: { words: this.words } })

      // this.$router.push({ name: 'search', params: { words: this.words } })

    }
  }
}
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>